<template>
  <div>
    <h1>报表</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style><template>
  <div class="box-pie" style="height: 600px" ref="chart"></div>
</template>

<script>
export default {
  data() {
    return {
      chart: null,
      // 配置可视化图形
      option: {
        legend: {},
        tooltip: {},


        dataset: {
          source: [
            ['product', '2021', '2022', '2023'],
            ['Matcha Latte', 43.3, 85.8, 108.7],
            ['Milk Tea', 83.1, 73.4, 55.1],
            ['Cheese Cocoa', 86.4, 65.2, 82.5],
            ['Walnut Brownie', 72.4, 53.9, 39.1]
          ]
        },
        xAxis: {type: 'category'},
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{type: 'bar'}, {type: 'bar'}, {type: 'bar'}]
      }

    }
  },
  mounted() {
    this.getPage();
  },
  methods: {
    getPage() {
      // 引用chart并初始化
      this.chart = this.$echarts.init(this.$refs.chart);
      // 使用刚指定的配置项和数据显示图表。
      this.chart.setOption(this.option);
    },
  },
};
</script>

<style scoped>

</style>
